<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <p>
        <label>美食名称:</label>
        <input type="text" name="name">
    </p>

    <p>
        <label>美食价格</label>
        <input type="text" name="price">
    </p>
    <p>
        <label>美食类型</label>
        <select name="type_id">

        </select>
    </p>
</form>
{#{% for food in food %}#}
-->

<p>
    <label>美食名称：</label>
    <input type="text" name="d" id="name">
</p>

<div id="response">

</div>

<script src="/static/js/jquery-1.11.0.js"></script>
<script>
    $("#name").blur(function () {
        var value = $("#name").val();
        var url = "/find_food/?food_name="+value;
        console.log(url);
        $.ajax(
            {
                url: url,  //请求的地址，对应form表单的action
                type:"get", //请求的方法对应 form表单的method
                data:"", //请求携带的数据 对应表单数据
                success:function (data) {
                    var response_data = data["food_data"];
                    console.log(response_data);
                    for(var i in response_data){
                        var food_name = response_data[i]["name"];
                        var html = "<p>"+food_name+"</p>";
                        $("#response").empty();
                        $("#response").append(html);
                        console.log(html)
                    }
                },//如果请求成功，调用后面的函数，把后端返回的数据传给data
                error:function (error) {
                    console.log(error)
                }//如果请求失败，调用后面的函数，把后端返回的数据传给error
            }
        ) //发起ajax
    })
</script>

</body>
</html>